<template>
  <div>
      <div>vuex的分模块的使用</div>
      <h1>分模块的state:</h1>
      <!-- 分模块的state 使用
       $store.state.分模块名.属性 -->
      <h1 v-for="item in $store.state.tempStore.cartList" :key="item">{{item.name}}-----{{item.price}}</h1>
       <hr />
      <h1>分模块的getters</h1>
      <!-- $store.getters['分模块名/属性'] -->
      <h1 v-for="gitem in $store.getters['tempStore/cartListTwo']">{{gitem.name}}-----{{gitem.price}}</h1>

      <!-- 触发分模块的mutations -->
       <button @click="toAdd">oppo</button>

       <!-- 触发分模块的actions  -->
       <button @click="addAction">荣耀</button>
      <el-button type="primary">添加</el-button>
  </div>
</template>

<script>
export default {
  name: 'Vue2304BTemp',

  data() {
    return {
      
    };
  },

  mounted() {
    console.log(this.$store)
  },

  methods: {
      toAdd(){
        // 触发分模块的mutations
        // this.$store.commit("分模块名/方法",参数)
        this.$store.commit("tempStore/changeList",{name:'oppo',price:888})
      },
      addAction(){
        // 触发分模块的  actions
        this.$store.dispatch("tempStore/listAct",{name:'荣耀',price:666})

      }
  },
};
</script>